<template>
  <div class="viewport-wrapper">
    <div
        class="screen-container"
        :style="containerStyle"
    >
      <!-- 这里是您的监控大屏内容 -->
      <div class="dashboard-content">
        <div class="top-panel">
          <div class="logo">
            <img src="../../assets/nav-logo.png" />
            <div class="title">加热炉链路追踪系统</div>
          </div>
          <div class="right-nav">
            <div class="group">当前班组：<span>{{groupName}}</span></div>
            <div class="right">
              <div class="time">{{time}}</div>
              <div class="menu">
                <div class="menu-item">实时监控</div>
                <div class="menu-item">钢坯追溯</div>
                <div class="menu-item">历史详情</div>
              </div>
              <div class="logo"></div>
            </div>
          </div>
        </div>
        <!--总体指标-->
        <div class="middle-panel">
            <div class="index-list" >
              <div class="index-item" v-for="(item, index) in indexList" :key="index">
                <div class="index-name"><div class="decorate"></div>{{item.name}}</div>
                <div class="index-value">{{item.value}}</div>
              </div>
            </div>
        </div>
        <!--炉段指标-->
        <div class="section-panel">
          <!--炉段指标-->
          <div class="section-left">
            <div class="title"><img src="../../assets/img/一级标题样式.png"/><span>炉段指标</span></div>
            <div class="left-content">
              <el-table
                  :data="sectionData"
                  style="width: 100%; height: 100%;"
                  :header-cell-style="tableHeaderStyle"
                  :cell-style="tableCellStyle"
                  :row-style="tableRowStyle"
                  empty-text="暂无数据"
              >
                <!-- 第一列固定宽度 -->
                <el-table-column
                    v-if="headerList.length > 0"
                    :prop="headerList[0].prop"
                    :label="headerList[0].label"
                    width="150"
                    align="center"
                >
                </el-table-column>
                <!-- 其余列自动宽度 -->
                <el-table-column
                    v-for="(item, index) in headerList.slice(1)"
                    :key="index + 1"
                    :prop="item.prop"
                    :label="item.label"
                    align="center"
                >
                </el-table-column>
              </el-table>
            </div>
          </div>
          <!--出炉评价-->
          <div class="section-right">
            <div class="title"><img src="../../assets/img/一级标题样式.png"/><span>出炉评价</span></div>
            <div class="right-content">
              <div ref="chart" style="width: 100%; height: 100%;"></div>
            </div>
          </div>
        </div>
        <div class="bottom-panel">
          <div class="title"><img src="../../assets/img/一级标题样式.png"/><span>板坯跟踪</span></div>
          <div class="bottom-content">
            <div class="furnace-tracking-container">
              <div class="furnace" ref="furnaceChart" style="width: 100%; height: 100%;">
                <div class="furnace-container">
                  <div id="furnace">
                    <!-- 炉墙 -->
                    <div class="furnace-wall top-wall"></div>
                    <div class="furnace-wall bottom-wall"></div>
                    <div class="furnace-wall left-wall"></div>
                    <div class="furnace-wall right-wall"></div>
                    <!-- 钢坯位置将由JavaScript动态生成 -->
                  </div>
                </div>
                <!-- 标尺 -->
                <div class="scale-markers">
                  <div class="scale-marker">0m</div>
                  <div class="scale-marker" ref="scale-mid">{{ midScale }} m</div>
                  <div class="scale-marker" ref="scale-end">{{ endScale }} m</div>
                </div>
              </div>
            </div>
            <!--<div class="menu-nav">阿斯顿发射点</div>-->
            <!--<h1>作战指挥中心</h1>-->
            <!--<p>当前分辨率：{{ windowWidth }} x {{ windowHeight }}</p>-->
            <!--<p>当前缩放比例：{{ (scale * 100).toFixed(1) }}%</p>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'MonitorPage',
  data() {
    return {
      designWidth: 1920,
      designHeight: 1080,
      windowWidth: 0,
      windowHeight: 0,
      scale: 1,

      //
      groupName: '甲班',
      time: '2020/09/11  星期二  15:26',
      indexList: [
        {name: '热值(KJ/m³)', value: 2536},
        {name: '在炉块数(块)', value: 10},
        {name: '煤气压力(Pa)', value: 11.82},
        {name: '煤气流量(m³/h)', value: 11.82},
        {name: '空气压力(Pa)', value: 11.82},
        {name: '空气流量(m³/h)', value: 11.82},
        {name: '煤烟温度(℃)', value: 11.82},
        {name: '空烟温度(℃)', value: 11.82},
        {name: '最低入炉温度（℃）', value: 11.82},

      ],
      headerList: [
        {label: '指标项', prop: 'indexItem'},
        {label: '预热段', prop: 'pre'},
        {label: '加热段', prop: 'heat'},
        {label: '均热段', prop: 'soak'}
      ],
      sectionData: [
        {
          indexItem: '炉温(℃)',
          pre: '850',
          heat: '1250',
          soak: '1180'
        },
        {
          indexItem: '炉压(Pa)',
          pre: '12.5',
          heat: '15.3',
          soak: '13.8'
        },
        {
          indexItem: '煤气流量(m³/h)',
          pre: '2850',
          heat: '3200',
          soak: '2950'
        },
        {
          indexItem: '空气流量(m³/h)',
          pre: '2850',
          heat: '3200',
          soak: '2950'
        },
        {
          indexItem: '空燃比',
          preheatSection: '92.5',
          heatingSection: '88.3',
          soak: '95.1'
        },
        {
          indexItem: '残氧量(%)',
          preheatSection: '92.5',
          heatingSection: '88.3',
          soak: '95.1'
        },
        {
          indexItem: '残氧量(%)',
          preheatSection: '92.5',
          heatingSection: '88.3',
          soak: '95.1'
        }
      ],
      //
      // 折线图数据
      chartData: {
        xAxisData: ['1#', '2#', '3#', '4#', '5#', '6#', '7#', '8#', '9#', '10#'],
        series: [
          {
            name: '出炉温度',
            type: 'line',
            data: [1180, 1220, 1190, 1210, 1200, 1195, 1215, 1185, 1205, 1198],
            symbol: 'circle',
            symbolSize: 6
          },
          {
            name: 'RT2温度',
            type: 'line',
            data: [1150, 1170, 1160, 1180, 1175, 1165, 1185, 1155, 1178, 1162],
            symbol: 'circle',
            symbolSize: 6
          },
          {
            name: '综合评分',
            type: 'line',
            data: [88, 92, 85, 90, 89, 87, 93, 84, 91, 86],
            symbol: 'circle',
            symbolSize: 6,
            yAxisIndex: 1
          }
        ]
      },


      // 板坯跟踪
      // 初始钢坯数据
      initialSlabData: [
        { slab: "5304518T110", pos: 15.3 },
        { slab: "5304522T220", pos: 25 },
        { slab: "5304519T110", pos: 30.5 },
        { slab: "5304517T110", pos: 35.5 },
        { slab: "5304521T220", pos: 39 },
        { slab: "5304494T210", pos: 54.5 }
      ],

      // 加热炉和钢坯参数
      furnaceWidth: 12, // 炉宽固定为12米
      furnaceLength: 60, // 默认炉长60米
      slabLength: 10,   // 钢坯长度10米（对应炉宽方向）
      slabWidth: 1.2,   // 钢坯宽度1.2米（对应炉长方向）
      slabData: [], // 板坯数据

      // 刻度线
      midScale: 30,
      endScale: 60
    }
  },
  computed: {
    containerStyle() {
      return {
        transform: `scale(${this.scale}) translate(-50%, -50%)`
      }
    }
  },
  mounted() {
    this.updateScale()
    window.addEventListener('resize', this.debouncedUpdateScale)
    window.addEventListener('orientationchange', this.debouncedUpdateScale)
    this.initChart(); // 初始化图表
    this.slabData = [...this.initialSlabData] // 复制初始数据
    this.midScale = this.furnaceLength / 2
    this.endScale = this.furnaceLength
    // 计算比例因子（像素/米）
    // 获取id为furnace的元素的clientWidth
    const furnaceElement = document.getElementById('furnace');
    const pixelsPerMeterLength = furnaceElement.clientWidth / this.furnaceLength;
    const pixelsPerMeterWidth = furnaceElement.clientHeight / this.furnaceWidth;
    // const pixelsPerMeterLength = this.furnaceLength;
    // const pixelsPerMeterWidth = this.furnaceWidth;
    // alert(furnaceElement.clientHeight)
    // alert(furnaceElement.clientWidth)


    this.slabData.forEach((slab, index) => {
      console.log(index)
      const slabElement = document.createElement('div');
      slabElement.className = 'slab';
      slabElement.setAttribute('data-slab', slab.slab);
      slabElement.setAttribute('title', `钢坯: ${slab.slab}, 位置: ${slab.pos}m`);

      // 计算位置和尺寸（转换为像素）
      // 钢坯沿炉长方向的位置（水平方向）
      const left = slab.pos * pixelsPerMeterLength;

      // 钢坯尺寸（长度对应炉宽方向，宽度对应炉长方向）
      const height = this.slabLength * pixelsPerMeterWidth; // 高度对应钢坯长度（炉宽方向）
      const width = this.slabWidth * pixelsPerMeterLength;   // 宽度对应钢坯宽度（炉长方向）pixelsPerMeterLength

      // 垂直居中（在炉宽方向上居中）
      const top = (furnaceElement.clientHeight - height) / 2;

      // 设置样式 让它们在同一水平轴上
      slabElement.style.position = 'absolute';
      slabElement.style.marginLeft = `${left}px`;
      slabElement.style.marginTop = `${top}px`;
      slabElement.style.width = `${width}px`;
      slabElement.style.height = `${height}px`;
      slabElement.style.background = 'linear-gradient(135deg, #4a9ff2, #3c97f1)';
      slabElement.style.borderRadius = '4px';
      // 添加钢坯编号（文本需要90°展示）
      const slabNumberElement = document.createElement('div');
      slabNumberElement.className = 'slab-number';
      slabNumberElement.style.transform = 'rotate(90deg)';
      slabNumberElement.textContent = slab.slab;
      slabElement.appendChild(slabNumberElement);
      slabElement.style.display = 'flex';
      slabElement.style.justifyContent = 'center';
      slabElement.style.alignItems = 'center';
      slabElement.style.color = 'white';
      slabElement.style.fontSize = '16px';
      slabElement.style.zIndex = '1';
      furnaceElement.appendChild(slabElement);
    });
    // hover板坯时，放大1.02倍，并且出现一个提示框， 取消hover 恢复到默认 。
    furnaceElement.addEventListener('mousemove', (event) => {
      const slabElement = event.target.closest('.slab');
      if (slabElement) {
        slabElement.style.transform = 'scale(1.02)';
      }
    })
    furnaceElement.addEventListener('mouseout', (event) => {
      const slabElement = event.target.closest('.slab');
      if (slabElement) {
        slabElement.style.transform = 'scale(1)';
      }
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.debouncedUpdateScale)
    window.removeEventListener('orientationchange', this.debouncedUpdateScale)
    if (this.chart) {
      this.chart.dispose(); // 销毁图表实例
    }
  },
  methods: {
    tableRowStyle() {
      return {
        'background-color': 'transparent'
      }
    },
    updateScale() {
      this.windowWidth = window.innerWidth
      this.windowHeight = window.innerHeight

      const scaleX = this.windowWidth / this.designWidth
      const scaleY = this.windowHeight / this.designHeight

      this.scale = Math.min(scaleX, scaleY)
    },
    debounce(func, wait) {
      let timeout
      return function executedFunction(...args) {
        const later = () => {
          clearTimeout(timeout)
          func(...args)
        }
        clearTimeout(timeout)
        timeout = setTimeout(later, wait)
      }
    },
    tableHeaderStyle() {
      return {
        'background-color': 'rgba(15, 28, 60, 0.8)',
        'color': '#7EF6FC',
        'font-size': '16px',
        'border-bottom': '1px solid #0bc0d0',
        'text-align': 'center',
        'font-weight': 'bold',
        'height': '45px'
      }
    },
    tableCellStyle() {
      return {
        'background-color': 'rgba(9, 64, 131, 0.3)',
        'color': '#ffffff',
        'font-size': '14px',
        'border-bottom': '1px solid rgba(11, 192, 208, 0.3)',
        'text-align': 'center',
        'padding': '8px 0',
        'height': '40px',
      //         'font-family': 'Digital-7, monospace',
      }
    },
    initChart() {
      const chartDom = this.$refs.chart;
      this.chart = echarts.init(chartDom);

      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(15, 28, 60, 0.9)',
          borderColor: '#0bc0d0',
          borderWidth: 1,
          textStyle: {
            color: '#7EF6FC'
          },
          axisPointer: {
            lineStyle: {
              color: '#0bc0d0'
            }
          }
        },
        legend: {
          data: ['出炉温度', 'RT2温度', '综合评分'],
          right: '10%',
          top: 10,
          textStyle: {
            color: '#7EF6FC',
            fontSize: 12
          },
          itemWidth: 12,
          itemHeight: 8,
          itemGap: 15
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.chartData.xAxisData,
          axisLine: {
            lineStyle: {
              color: '#0bc0d0'
            }
          },
          axisLabel: {
            color: '#7EF6FC',
            fontSize: 12
          },
          splitLine: {
            show: false
          }
        },
        yAxis: [
          {
            type: 'value',
            // name: '温度(℃)',
            nameTextStyle: {
              color: '#7EF6FC',
              fontSize: 12
            },
            min: 1100,
            max: 1250,
            axisLine: {
              lineStyle: {
                color: '#0bc0d0'
              }
            },
            axisLabel: {
              color: '#7EF6FC',
              fontSize: 12
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(11, 192, 208, 0.3)',
                type: 'dashed'
              }
            }
          },
          {
            type: 'value',
            // name: '分数',
            nameTextStyle: {
              color: '#7EF6FC',
              fontSize: 12
            },
            min: 80,
            max: 100,
            axisLine: {
              lineStyle: {
                color: '#0bc0d0'
              }
            },
            axisLabel: {
              color: '#7EF6FC',
              fontSize: 12
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: this.chartData.series.map((series, index) => {
          const colors = ['#E24D42', '#7eb26d', '#F9BA8F'];
          return {
            ...series,
            lineStyle: {
              width: 2,
              color: colors[index]
            },
            itemStyle: {
              color: colors[index]
            },
            areaStyle: series.name === '综合评分' ? null : {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: colors[index] + '40'},
                {offset: 1, color: colors[index] + '10'}
              ])
            }
          };
        })
      }
      this.chart.setOption(option);

      // 响应式处理
      window.addEventListener('resize', () => {
        this.chart.resize();
      });
    },
  },
  created() {
    this.debouncedUpdateScale = this.debounce(this.updateScale, 250)
  }
}
</script>

<style scoped lang="scss">
@font-face {
  font-family: 'Digital-7';
  src: url('../../assets/font/digital-7.regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.viewport-wrapper {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: black;
}

.screen-container {
  position: absolute;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  left: 50%;
  top: 50%;
  transition: transform 0.3s ease;
}

.dashboard-content {
  width: 100%;
  height: 100%;
  background-color: #0f1c3c;
  background-image: url("../../assets/app-bg.png");
  color: white;
  //display: flex;
  //align-items: center;
  //justify-content: center;
  font-family: sans-serif;

  .top-panel {
    margin: 1%;
    display: flex;
    height: 8%;
    width: 100%;
    align-items: center;
    .logo {
      height: 66px;
      width: 30%;
      display: flex;
      img {
        height: 100%;
        width: 100%;
      }
      .title {
        margin-left: -380px;
        height: 100%;
        width: 300px;
        font-size: 30px;
        display: flex;
        align-items: center;
      }
    }


    .right-nav {
      display: flex;
      justify-items: center;
      justify-content: space-between;
      align-items: center;
      width: 70%;
      //background-color: #42b983;
      background-image: url("../../assets/img/导航分割线.png");
      background-position: bottom;
      background-repeat: no-repeat;
      height: 100%;

      .group {
        margin-left: 40px;
        font-size: 18px;
        span {
          border: 1px solid #0bc0d0;
          border-radius: 4px;
          background-color: #094083;
          padding: 5px 17px ;
          cursor: pointer;
        }
      }
      .right {
        width: 70%;
        display: flex;
        justify-content: right;
        align-items: center;

        margin-right: 60px;
        .time {
          width: 240px;
          font-size: 18px;
        }
        .menu {
          display: flex;
          .menu-item {
            margin: 4px;
            font-size: 16px;
            border: 1px solid #0bc0d0;
            border-radius: 4px;
            padding: 5px 17px;
            background-color: #0f1c3c;
            cursor: pointer;
          }
          .menu-item:hover {
            background-color: #094083;
          }
        }
        .logo {
          background-image: url("../../assets/img/编组25.png");
          background-position: right;
          background-repeat: no-repeat;
          width: 150px;
          //background-color: #42b983;
          //opacity: 0.3;
          img {
            height: 100%;
          }
        }
      }
    }
  }

  .middle-panel {
    width: 100%;
    height: 10%;
    //background-color: #42b983;
    background-image: url("../../assets/img/背景.png");
    background-position: center;
    background-repeat: no-repeat;
    .index-list {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-around;
      justify-items: center;
      align-items: center;
      .index-item {
        .index-name {
          display: flex;
          align-items: center;
          .decorate{
            width: 10px;
            height: 10px;
            margin-right: 5px;
            // 旋转45度
            transform: rotate(45deg);
            background-color: #7ef6fc;
          }
        }

        .index-value {
          font-family: 'Digital-7', monospace;
          font-size: 40px;
          color: #7EF6FC;
          letter-spacing: -0.11px;
          font-weight: 400;
        }
      }

    }
  }

  .section-panel {
    padding: 1%;
    width: 100%;
    height: 30%;
    display: flex;
    //background-color: #42b983;
    .section-left {
      width: 60%;
      height: 100%;
      .title {
        font-size: 18px;
        margin-bottom: 10px;
        span {
          padding-left: 5px;
        }
      }
      .left-content {
        width: 100%;
        height: 100%;
        background-image: url("../../assets/img/编组 48.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;




        // 表格自定义样式
        ::v-deep .el-table {
          background-color: transparent;

          // 表头样式
          .el-table__header-wrapper {
            background-color: rgba(15, 28, 60, 0.9);
          }

          // 表格主体样式
          .el-table__body-wrapper {
            background-color: transparent;

            // 行悬停效果
            tr:hover > td {
              //background-color: rgba(11, 192, 208, 0.2) !important;
            }

            // 隔行变色效果
            tr:nth-child(odd) {
              background-color: rgba(9, 64, 131, 0.2);
            }
            tr:nth-child(even) {
              background-color: rgba(15, 28, 60, 0.2);
            }
          }

          // 单元格样式
          .el-table__cell {
            border-bottom: 1px solid rgba(11, 192, 208, 0.3);
            background-color: transparent;
          }

          // 滚动条样式（如果需要）
          &::-webkit-scrollbar {
            width: 6px;
            height: 6px;
          }
          &::-webkit-scrollbar-thumb {
            border-radius: 3px;
            background: rgba(11, 192, 208, 0.5);
          }
        }

      }
    }
    .section-right {
      margin-left: 10px;
      width: 40%;
      height: 100%;
      .title {
        font-size: 18px;
        margin-bottom: 10px;
        span {
          padding-left: 5px;
        }
      }
      .right-content {
        width: 100%;
        height: 100%;
        background-image: url("../../assets/img/编组 48.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }
  }

  .bottom-panel {
    padding: 1%;
    width: 100%;
    height: 45%;
    .title {
      font-size: 18px;
      margin-bottom: 10px;
      span {
        padding-left: 5px;
      }
    }
    .bottom-content {
      width: 100%;
      height: 100%;
      background-image: url("../../assets/img/编组 48.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      text-align: center;

      h1 {
        font-size: 48px;
        margin-bottom: 20px;
      }

      p {
        font-size: 24px;
      }

      .furnace-tracking-container {
        //background-color: #42b983;
        width: 100%;
        height: 100%;
        .furnace {
          .furnace-container {
            position: relative;
            width: 100%;
            height: 100%;
            //background-color: #f8f9fa;
            border: 2px solid #bdc3c7;
            border-radius: 6px;
            overflow: hidden;
            margin: 10px 0;
          }
        }

        #furnace {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }

        .furnace-wall {
          position: absolute;
          background-color: #7f8c8d;
        }

        .top-wall, .bottom-wall {
          left: 0;
          width: 100%;
          height: 15px;
        }

        .top-wall {
          top: 0;
        }

        .bottom-wall {
          bottom: 0;
        }

        .left-wall, .right-wall {
          top: 0;
          width: 15px;
          height: 100%;
        }

        .left-wall {
          left: 0;
        }

        .right-wall {
          right: 0;
        }
      }
    }
  }



}


.slab {
  position: absolute;
  background: linear-gradient(135deg, #f09c1f, #e7520d);
  border-radius: 3px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  font-size: 14px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.slab:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.scale-markers {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 15px;
  margin-top: 5px;
}

.scale-marker {
  font-size: 12px;
  color: #7f8c8d;
}
.furnace-length {
  background-color: #7f8c8d;
}

.slab-color {
  background: linear-gradient(135deg, #d49c34, #c79b23);
}

.orientation-note {
  text-align: center;
  font-style: italic;
  color: #e74c3c;
  margin-top: 5px;
  font-size: 14px;
}

@media (max-width: 768px) {
  .control-panel {
    flex-direction: column;
    align-items: flex-start;
  }

  .furnace-container {
    height: 200px;
  }
}



</style>
